<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>诛仙法服</title>
        <style>
            body{
                font-size: 100%;
            }
            p.serif{
                font-family:'Times New Roman', Times, serif
            }
            p.sansserif{
                font-family: Arial, Helvetica, sans-serif;
            }
            p.normal{
                font-style: normal;
                font-size: 0.5em;
            }
            p.italic{
                font-style: italic;
                font-size: 2em;
            }
            p.oblique{
                font-style: oblique;
                font-size: 15px;
            }
            
            
            h1{
                font-size: 40px;
            }
            a:link{
                color: #000000;
                text-decoration: none;
            }
            a:visited{
                color: #00ff00;
                text-decoration: line-through;
            }
            a:hover{
                color: #ff00ff;
            }
            a:active{
                color: #0000ff;
            }
        </style>
    </head>
    <body>
        <h1>Css font-family</h1>
        <p class="serif">这一段的字体是 Times New Roman</p>
        <p class="sansserif">这一段的字体是 Arial.</p>
        <p class="normal">这是一个段落,正常。</p>
        <p class="italic">这是一个段落,斜体。</p>
        <p class="oblique">这是一个段落,斜体。</p>

        <p><b><a href="/imgs/" target="_blank">这是一个链接</a></b></p>
        <p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
        <p><b>注意：</b> a:active 必须在 a:hover 之后。</p>
    </body>
</html>